<template>
  <div id="main"></div>
</template>

<script>
// 引入Echarts
import * as echarts from 'echarts';

export default {
	name:'VisualV',
	mounted(){
		// 基于准备好的dom，初始化echarts实例
		let myChart = echarts.init(document.getElementById('main'));
		// 绘制图表
		myChart.setOption({
			legend: {
				top: 'bottom'
			},
			toolbox: {
				show: true,
				feature: {
					mark: { show: true },
					dataView: { show: true, readOnly: false },
					restore: { show: true },
					saveAsImage: { show: true }
				}
			},
			series: [
				{
					name: 'Nightingale Chart',
					type: 'pie',
					radius: [50, 150],
					center: ['50%', '50%'],
					roseType: 'area',
					itemStyle: {
						borderRadius: 8
					},
					data: [
						{ value: 38, name: '视频转载' },
						{ value: 40, name: '评分' },
						{ value: 32, name: '新增用户' },
						{ value: 30, name: '登陆数据' },
						{ value: 28, name: '新增会员' },
						{ value: 26, name: '视频播放量' },
						{ value: 22, name: '支付宝订单' },
						{ value: 18, name: '微信订单' }
					]
				}
			]
		});
	}
}
</script>

<style>
#main {
  width: 400px;
  height: 450px;
}
</style>